
<template>
    <div class="box" @scroll="move">
        <h3>Scroll to see the animation</h3>
        <div class="scroll">Content</div>
        <div class="scroll">Content</div>
        <div class="scroll">Content</div>
        <div class="scroll">Content</div>
        <div class="scroll">Content</div>
        <div class="scroll">Content</div>
        <div class="scroll">Content</div>
        <div class="scroll">Content</div>
        <div class="scroll">Content</div>
        <div class="scroll">Content</div>
        <div class="scroll">Content</div>
        <div class="scroll">Content</div>
        <div class="scroll">Content</div>
        <!-- 偶数个div的，从右往左 -->
        <!-- 奇数个div的，从左往右 -->
    </div>
  </template>
  

  <!-- 

     vue3的生命周期
       setup  => beforecreate created  => 获取不到dom元素，
      beformounte mounted =>

   -->
  <script setup>
  import { onMounted} from 'vue'
 

  // 获取浏览器的高度
  // 在获取这个div盒子距离顶部的高度
  const move = () => {
    const topHeight  = (window.innerHeight/5)*4;
    const scrollBoxs = document.querySelectorAll('.scroll');
    scrollBoxs.forEach(item=>{
      const scollHeight = item.getBoundingClientRect().top;
      item.classList.remove('move');
      if(scollHeight<topHeight){
        item.classList.add('move')
      }
    })
  }  
  
  onMounted(()=>{
    move();
  })
  
  </script>
  
  <style scoped>
  .box{
    width: 100%;
    height: 100%;
    background-color: #efedd6;
    text-align: center;
    overflow: auto;
  }
  h3{
    font-size: 30px;
    margin-top: 10px;
  }
  /* 给所有的.scroll初始位置都在右边 */
  .scroll{
    background-color: steelblue;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 400px;
    height: 200px !important;
    margin: 10px;
    border-radius: 10px;
    box-shadow: 2px 4px 5px rgb(0 0 0 / 30%);
    margin: 20px auto;
    font-size: 40px;
    font-weight: 600;
    transition: all .2s;
    transform: translateX(400%);
  }

  /* 偶数个的话，初始位置在左边 */
  .scroll:nth-child(even){
    transform: translateX(-400%);
  }


 .box .move{
    transform: translateX(0);
  }
  </style>